import { memo, useEffect, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { LoginWrapper } from './style';
import AnotherLogin from './c-component/another-login';
import CaptchaLogin from './c-component/captcha-login';
import PasswordLogin from './c-component/password-login';
import ForgetPassword from './c-component/forget-password';
import EmailLogin from './c-component/email-login';
interface IProps {
  children?: ReactNode;
  open: boolean;
  setOpen: (val: boolean) => void;
}
const loginComponentMap = {
  another: AnotherLogin,
  captcha: CaptchaLogin,
  password: PasswordLogin,
  forget: ForgetPassword,
  email: EmailLogin,
};

const Login: FC<IProps> = (props) => {
  const { open, setOpen } = props;
  const [status, setStatus] = useState('another');
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal');
  useEffect(() => {
    if (!open) {
      setStatus('another');
    }
  }, [open]);
  const handleOk = () => {
    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
  };
  const CurrentLoginComponent = loginComponentMap[status as keyof typeof loginComponentMap];
  const handleCancel = () => {
    console.log('取消');
    setOpen(false);
  };
  let loginTitle = '登录';
  if (status === 'forget') {
    loginTitle = '重设密码';
  } else if (status !== 'another') {
    loginTitle = '手机号登录';
  }
  return (
    <LoginWrapper
      open={open}
      onOk={handleOk}
      confirmLoading={confirmLoading}
      onCancel={handleCancel}
      width={530}
      footer={null}
    >
      <div className="header">
        <span>{loginTitle}</span>
      </div>
      <CurrentLoginComponent
        setStatus={(val) => {
          setStatus(val);
        }}
        setOpen={() => {
          setOpen(false);
        }}
      ></CurrentLoginComponent>
    </LoginWrapper>
  );
};

export default memo(Login);
